{% extends "admin.html" %}


{% block jsfuncs %}

s = new Sortables(['#inactive_widgets_ul' , '#active_widgets_ul'],{ clone:true, opacity: 0.5 });

$('save').addEvents({
	'click': function(){
		var data= 'sidebar_widgets=[' + s.serialize(1,function(element, index){
				return "'" + element.getProperty('id') + "'";
			}).join(', ') + ']';
	 
		var log = $('load_img').setStyles({'display':'inline'});
		

		var req = new Request.HTML({ 	url: '/admin/sidebar/',
			 									  	method: 'post',
												  	evalScripts : true,
												  	data: data,
													onComplete: function(e) {
														log.setStyles({'display':'none'});
													}
												}).send();
		
		
	}
	
});

{% endblock %}

{% block menu2 %}
<div id="menu2">
	<ul>
		<li{% if inactive or active %} class="current"{% endif %}><a href="/admin/sidebar/">Settings</a></li>
		<li{% if links %} class="current"{% endif %}><a href="/admin/sidebar/links/">Links</a></li>
		<li{% if widgets %} class="current"{% endif %}><a href="/admin/sidebar/widgets/">Widgets</a></li>
	</ul>
</div>
{% endblock %}

{% block content %}

<div id="inactive_widgets" class="sortable">
<h3>Inactive</h3>
<ul id="inactive_widgets_ul">
{% for item in inactive %}	
	<li id="{{item.id}}" class="item {{item.class}}">{{item.name}}</li>
{% endfor %}
</ul>	
</div>


<div id="active_widgets" class="sortable">
<h3>Sidebar</h3>	
<ul id="active_widgets_ul">
{% for item in active %}	
	<li id="{{item.id}}" class="item {{item.class}}">{{item.name}}</li>
{% endfor %}
</ul>
</div>

<div id="options">
	<div id="sidebar_desc">Drag items for configure the sidebar</div>
	<div id="new">
	<a	href="#" id="save">Save</a><img src="/static/images/loading.gif" style="display:none;" id="load_img" />
	</div>
</div>


{% endblock %}